<template>
  <div class="router-page">
    <head-bar type="0"></head-bar>
    <div class="content">
      <n-card class="card" @click="$router.push('/search')">
        <template #cover>
          <img src="@/assets/images/tab-search.png" alt="search" class="pic" />
        </template>
        <div class="card-content">
          <div class="divider"></div>
          <div class="divider"></div>
          <span class="text-large"> MDS矩阵搜索<br /> </span>
          <div class="divider"></div>
          <span>
            使用3种构造方法 <br />搜索GF(2, 4)和GF(2, 8)上的<br />4阶MDS矩阵
          </span>
        </div>
      </n-card>
      <n-card class="card" @click="$router.push('/optimize')">
        <template #cover>
          <img
            src="@/assets/images/tab-optimize.png"
            alt="optimize"
            class="pic"
          />
        </template>
        <div class="card-content">
          <div class="divider"></div>
          <div class="divider"></div>
          <span class="text-large"> MDS矩阵优化<br /> </span>
          <div class="divider"></div>
          <span>
            对任意GF(2,8)上的 <br />4阶MDS矩阵<br />进行异或数和Hamming重量优化
          </span>
        </div>
      </n-card>
      <n-card class="card" @click="$router.push('/analyze')">
        <template #cover>
          <img
            src="@/assets/images/tab-analyze.png"
            alt="analyze"
            class="pic"
          />
        </template>
        <div class="card-content">
          <div class="divider"></div>
          <div class="divider"></div>
          <span class="text-large"> MDS矩阵分析<br /> </span>
          <div class="divider"></div>
          <span>
            矩阵MDS性质判定
            <br />矩阵Hamming重量和异或数分析<br />矩阵格式化输出
          </span>
        </div>
      </n-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import HeadBar from '@components/Head.vue';
</script>

<style scoped>
.content {
  margin: 80px 300px 0;
  display: flex;
  justify-content: space-around;
}
.card {
  width: 270px !important;
  border-radius: 20px;
  box-shadow: 4px 4px 8px #bebebe;
  border: none !important;
  cursor: pointer;
}
.card:hover {
  filter: brightness(0.95);
  -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(0, 0, 0, 0.4)));
}
.card-content {
  text-align: center;
  line-height: 25px;
  background-color: #fff;
  margin-bottom: 20px;
}
.divider {
  height: 15px;
}
.text-large {
  font-size: 1.2rem;
  font-weight: 600;
}
.text-small {
  font-size: 1rem;
  font-weight: 600;
}
.pic {
  height: 210px;
  width: 270px;
}
</style>
